<template>
<div class="login-page">
    <h2>短信登录</h2>
    <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="手机号"
    placeholder="请输入手机号"
    :rules="[{ required: true, message: '请输入手机号' },  { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }]"
  />

<van-field
  v-model="password"
  name="验证码"
  placeholder="请输入验证码"
   :rules="[{ required: true, message: '请输入验证码' }, { pattern: /^\d{6}$/, message: '验证码是6个数字' }]"
>
  <template #button>
    <!-- </van-button> size="small" type="primary">发送验证码</van-button> -->
    <!-- <span>发送验证码</span> -->
    <span v-if = "isShow" class="send" @click= "send">发送验证码</span>
     <span v-else  class="count">{{count}}s后重新获取</span>
  </template>
</van-field>
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" @click="$router.push('/user')">登录</van-button>
  </div>
</van-form>

</div>
</template>

<script>
// import axios from 'axios'
import { Toast } from 'vant'
export default {
  name: 'LoginPage',
  data () {
    return {
      username: '',
      password: '246810',
      isShow: true,
      count: '',
      timer: null
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    },
    send () {
      console.log('点了吗')
      // axios.get(`http://toutiao.itheima.net/v1_0/sms/codes/${this.username}`)

      const qq = 50
      if (!this.timer && this.username.length === 11) {
        this.count = qq
        this.isShow = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= qq) {
            this.count--
          } else {
            this.isShow = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      } else {
        Toast.fail('手机号格式错误')
      }
      localStorage.setItem('username', JSON.stringify(this.username))
    }
  }
}
</script>

<style scoped lang="less">
h2{
    margin-left: 20px
}
 button{
    border-radius: 0%;
    border-color : #fa6d1d;
    background-image : linear-gradient(90deg, rgb(254, 79, 79), rgb(252, 102, 39))
 }
   .send {
    font-size: 12px;
    color: #A5A6AB;
  }
</style>
